<template>
	<view class="container">
		<view class="status" :style="{ opacity: afterHeaderOpacity }"></view>
		<view class="header">
			<!-- 头部-默认显示 -->
			<view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }">
				<view class="back">
					<view class="yticon icon-zuo" @tap="back" v-if="showBack"></view>
				</view>
				<view class="middle"></view>
				<!-- 暂时屏蔽分享和消息功能 -->
				<view class="icon-btn">
					<view class="yticon icon-icon--" @tap="toMsg"></view>
					<view class="yticon icon-share" @tap="share"></view>
				</view>
			</view>

			<!-- 头部-滚动渐变显示 -->
			<view class="after" :style="{ opacity: afterHeaderOpacity, zIndex: afterHeaderzIndex }">
				<view class="back">
					<view class="yticon icon-zuo" @tap="back" v-if="showBack"></view>
				</view>
				<view class="middle">
					<view v-for="(anchor,index) in anchorlist" class="middle_item" :class="[selectAnchor == index ? 'on' : '']" :key="index"
					 @tap="toAnchor(index)">{{anchor.name}}</view>
				</view>
				<!-- 暂时屏蔽分享和消息功能 -->
				<view class="icon-btn">
					<view class="yticon icon-icon--" @tap="toMsg"></view>
					<view class="yticon icon-share" @tap="share"></view>
				</view>
			</view>
		</view>


		<view class="container-box">
			<!-- 商品主图轮播 -->
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="(swiper,index) in swiperList" :key="index">
						<image :src="imgsrc + swiper"></image>
					</swiper-item>
				</swiper>
				<view class="indicator num-font">{{currentSwiper+1}}/{{swiperList.length}}</view>
			</view>

			<view class="product-info">
				<!-- 标题 价格 -->
				<view class="goods-info">
					<view class="price-number">
						<view class="name">
							<text>{{fortune == null ? '抢购价' : '兑换价'}}</text>
						</view>
						<view class="price-box">
							<template v-if="fortune == null">
								<view class="price">
									<text>￥</text>
									<text class="num-font">{{sku.price}}</text>
								</view>
								<text class="original-price num-font">￥{{sku.original_price}}</text>
							</template>
							<template v-else>
								<view style="display: flex;align-items: center;">
									<text class="num-font" style="font-size: 56upx;">{{fortune}}</text>
									<text>福分</text>
								</view>
							</template>
						</view>
						<view class="sold">
							<template v-if="fortune == null">
								<text class="num-font">{{goods.sale}}</text>
								<text>件已售</text>
							</template>
							<template v-else>
								<text>已兑换</text>
								<text class="num-font">{{goods.ex_quantity }}</text>
								<text>件</text>
							</template>
						</view>
					</view>
					<view class="info">
						<view class="title">
							<view class="name">
								{{goods.name}}
							</view>
							<view class="text">{{goods.detail_desc}}</view>
						</view>
						<view class="box">
							<view class="icon">
								<image mode="widthFix" src="/static/img/goods/icon_shoucang1.png"></image>
							</view>
							<view class="text">收藏</view>
						</view>
					</view>
				</view>

				<!-- 服务-规则选择 -->
				<view class="card-box spec">
					<template v-if="fortune == null">
						<view class="row">
							<view class="text">优惠</view>
							<view class="content">全场商品抵用券</view>
							<view class="arrow">
								<view class="btn">抵用券</view>
							</view>
						</view>
						<view class="row">
							<view class="text">活动</view>
							<view class="content">暂无活动</view>
						</view>
					</template>

					<view class="row">
						<view class="text">发货地</view>
						<view class="content">{{goods.area}}</view>
						<view class="text delivery">快递</view>
						<view class="content">0.00</view>
						<!-- 暂时屏蔽 -->
						<!-- <view class="arrow">
							<view class="text">月销售{{goods.sale}}+</view>
						</view> -->
					</view>
					<view class="row" @tap="showService">
						<view class="text">服务</view>
						<view class="content">
							<view class="serviceitem" v-for="(item,index) in goodsData.service" :key="index">{{item.name}}</view>
						</view>
						<view class="arrow">
							<view class="yticon icon-you"></view>
						</view>
					</view>

					<view class="row" @tap="showSpec(false, fortune == null ? 'double' : 'fortune')">
						<view class="text">已选</view>
						<view class="text">
							{{specSelectedValue}}
						</view>
						<view class="arrow">
							<view class="yticon icon-you"></view>
						</view>
					</view>
					<view class="row">
						<view class="text">库存</view>
						<view class="content">{{sku.qty}}</view>
					</view>
				</view>
				
				<!-- 评价 -->
				<view class="card-box comments radius" id="comments">
					<view class="row">
						<view class="text">商品评价({{goodsData.comment.number}})</view>
						<view class="arrow">
							好评率0%
						</view>
					</view>
					<view class="row" v-if="goodsData.comment.number == 0">
						<view class="title">———— 暂无评价 ————</view>
					</view>
					<view class="comment" v-else @tap="toRatings">
						<view class="user-info">
							<view class="face">
								<image :src="goodsData.comment.userface"></image>
							</view>
							<view class="arrow">
								<view class="name-rating">
									<view class="username">
										{{goodsData.comment.username}}
									</view>
									<view class="rating">
										好评率90%
									</view>
								</view>
								<view class="Star">
									<image src="/static/img/goods/doc_4.png" mode="" class="f01"></image>
									<image src="/static/img/goods/doc_4.png" mode="" class="f01"></image>
									<image src="/static/img/goods/doc_4.png" mode="" class="f01"></image>
									<image src="/static/img/goods/doc_4.png" mode="" class="f01"></image>
								</view>
							</view>
						</view>
						<view class="content_content">
							{{goodsData.comment.content}}
						</view>
						<view class="img-video">
							<view class="box" v-for="item in goodsData.comment.video" @tap="playVideo(item.path)" :key="item.path">
								<image mode="aspectFill" :src="item.img"></image>
								<view class="playbtn">
									<view class="icon bofang"></view>
								</view>
							</view>
							<view class="box" v-for="item in goodsData.comment.img" @tap="showBigImg(item,row.first.img)" :key="item">
								<image mode="aspectFill" :src="item"></image>
							</view>
						</view>
					</view>
					<view class="row2" v-if="goodsData.comment.number != 0">
						<view class="btn" @tap="toRatings">查看全部评价</view>
					</view>
				</view>
				<!-- 详情 -->
				<view class="description">
					<view class="title">———— 商品详情 ————</view>
					<view class="content">
						<rich-text :nodes="descriptionStr"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部菜单 -->
		<view class="footer">
			<view class="icons" v-if="fortune == null">
				<view class="box" @tap="toChat">
					<view class="yticon icon-icon--"></view>
					<view class="text">客服</view>
				</view>
				<view class="box" @tap="toCart">
					<view class="yticon icon-gouwuche_"></view>
					<view class="text">购物车</view>
					<view class="text cart_amount">{{cart_amount}}</view>
				</view>
				<!-- <view class="box" @tap="keep">
					<view class="icon " :class="[isKeep?'shoucangsel':'shoucang']"></view>
					<view class="text">{{isKeep?'已':''}}收藏</view>
				</view> -->
			</view>
			<view class="btn">
				<template v-if="fortune == null">
					<view class="joinCart" @tap="showSpec(false, 'cart')">加入购物车</view>
					<view class="buy" @tap="showSpec(false, 'buy')">立即购买</view>
				</template>
				<template v-else>
					<view class="fortuneExchange" @tap="showSpec(false,'fortune')">立即兑换</view>
				</template>
			</view>
		</view>


		<!-- share弹窗 -->
		<uni-popup ref="sharePopup" type="bottom">
			<view class="popup-box" @tap.stop="discard">
				<view class="share-content">
					<view class="h1">分享到</view>
					<view class="list">
						<view class="box">
							<image src="../../static/temp/wx.png"></image>
							<view class="title">
								微信好友
							</view>
						</view>
						<view class="box">
							<image src="../../static/temp/pyq.png"></image>
							<view class="title">
								朋友圈
							</view>
						</view>
						<view class="box">
							<image src="../../static/temp/wb.png"></image>
							<view class="title">
								新浪微博
							</view>
						</view>
						<view class="box">
							<image src="../../static/temp/qq.png"></image>
							<view class="title">
								QQ
							</view>
						</view>
					</view>
					<view class="btn" @tap="hideShare">
						取消
					</view>
				</view>

			</view>
		</uni-popup>

		<!-- 服务-模态层弹窗 -->
		<uni-popup ref="servicePopup" type="bottom">
			<view class="popup-box">
				<view class="content">
					<view class="row" v-for="(item,index) in goodsData.service" :key="index">
						<view class="title">{{item.name}}</view>
						<view class="description">{{item.description}}</view>
					</view>
				</view>
				<view class="btn">
					<view class="button" @tap="hideService">完成</view>
				</view>
			</view>
		</uni-popup>

		<!-- 规格-模态层弹窗 -->
		<uni-popup ref="cartPopup" type="bottom">
			<view class="popup-box">

				<view class="cart-content">
					<view class="content_goods">
						<view class="goods_img">
							<image :src="imgsrc + selectSku.pics" mode="aspectFit"></image>
						</view>
						<view class="goods_text" v-if="fortune == null">
							<view class="price">
								<text>¥</text>
								<text class="num-font">{{selectSku.price}}</text>
							</view>
							<view class="desc">{{selectSku.skuDesc || '请选择规格'}}</view>
						</view>
					</view>
					<view class="row" v-for="(specItem, index) in specList" :key="index">
						<view class="text">{{specItem.name}}</view>
						<view class="content_spc" :class="{selected: valItem.selected}" v-for="(valItem,valIndex) in specItem.spec_value"
						 :key="valIndex" @tap="selectSpecMethod(index, valIndex, valItem)">{{valItem.name}}</view>
					</view>

					<view class="length">
						<view class="text">数量</view>
						<view class="number">
							<view class="sub" @tap.stop="sub">
								<view class="yticon icon--jianhao"></view>
							</view>
							<view class="input num-font" @tap.stop="discard">
								<input type="number" v-model="amount" />
							</view>
							<view class="add" @tap.stop="add">
								<view class="yticon icon-jia2"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn">
					<template v-if="specMode == 'double'">
						<view class="button button_cart" @tap="selectMode(sku,'cart')">加入购物车</view>
						<view class="button" @tap="selectMode(sku,'buy')">立即购买</view>
					</template>
					<template v-else>
						<view class="button" @tap="selectMode(sku,specMode)">确定</view>
					</template>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import Api from '@/common/api';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import SkuManage, { joinKVStr, joinAttrStr } from '@/components/sku-manage/sku-manage'

	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				imgsrc: Api.imgsrc,
				fortune: null, //商品所需福分
				userFortune: null, //用户福分
				product_id: '',
				specMode: '', //选择规格弹窗的方式为 'buy'为购买 'cart'为购物车 'fortune'为福分兑换 'double'为双选模式
				goods: [],
				skuList: [],
				sku: [],
				specList: [],
				specSelected: [],
				specSelectedValue: '',
				//控制渐变标题栏的参数
				beforeHeaderzIndex: 11, //层级
				afterHeaderzIndex: 10, //层级
				beforeHeaderOpacity: 1, //不透明度
				afterHeaderOpacity: 0, //不透明度
				//是否显示返回按钮
				// #ifndef MP
				showBack: true,
				// #endif
				//轮播主图数据
				swiperList: [],
				//轮播图下标
				currentSwiper: 0,
				anchorlist: [], //导航条锚点
				selectAnchor: 0, //选中锚点
				// 商品信息
				goodsData: {
					id: 1,
					name: "商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题",
					price: "127.00",
					number: 1,
					service: [{
							name: "正品保证",
							description: "此商品官方保证为正品"
						},
						{
							name: "极速退款",
							description: "此商品享受退货极速退款服务"
						},
						{
							name: "7天退换",
							description: "此商品享受7天无理由退换服务"
						}
					],
					spec: ["XS", "S", "M", "L", "XL", "XXL"],
					comment: {
						number: 0,
						userface: '/static/img/face.jpg',
						date: '2019-04-21',
						spec: "规格: XL",
						grade: "good",
						username: '牧耘郎',
						content: '很不错，之前买了很多次了，值得购买！',
						img: ["https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg",
							"https://ae01.alicdn.com/kf/HTB1sL7hTjDpK1RjSZFrq6y78VXaw.jpg",
						],
						video: [{
							img: "https://ae01.alicdn.com/kf/HTB1AMEBTcfpK1RjSZFOq6y6nFXaK.jpg",
							path: "https://mp4.vjshi.com/2018-12-28/1083f3db90334f86e3fc3586b4472914.mp4"
						}]

					}
				},
				selectSpec: null, //选中规格
				isKeep: false, //收藏
				//商品描述html
				descriptionStr: '',
				videoDirection: 0,
				showFullscreenBtn: true,
				showPlayBtn: true,
				isPlayVideo: true,
				videoSrc: '',
				cart_amount: 0, //购物车数量
				amount: 1, //数量
				selectSku: { //仅在规格弹窗中显示切换规格时数据的变化
					pics: '', //所选规格图片
					price: '', //所选规格价格
					skuDesc: '', //所选规格字段组合
				},
				emptyMap: {}, //应该置灰不可点击的按钮
				activeSkuTagMap: {}, 
				hasSelectedList: [], //已经选中的属性信息
				currentSelectedPrice: 0, //当前选中的sku属性对应的价格
				currentTotalCount: 0, //当前选中的sku属性总库存
				skuRankList: []
			};
		},
		async onLoad(option) {
			// #ifdef MP
			//小程序隐藏返回按钮
			this.showBack = false;
			// #endif
			//option为object类型，会序列化上个页面传递的参数


			/**
			 * 是否存在商品福分参数
			 */
			if (Object.prototype.toString.call(option.fortune) != '[object Undefined]') {
				let userInfoData = await Api.apiCall('post', Api.index.userInfo, {}); //获取用户信息

				if (userInfoData) this.userFortune = userInfoData.fortune; //用户福分
				this.fortune = option.fortune; //商品福分
				this.specMode = 'fortune'
			}


			/**
			 * 是否存在商品ID参数
			 */
			this.product_id = option.product_id;
			if (this.product_id) {
				var parm_data = {
					'product_id': this.product_id
				}
				let cartList = uni.getStorageSync('cartList');
				let data = await Api.apiCall('post', Api.goods.goodsDetail, parm_data);
				if (data) {
					this.skuList = data.skuList;
					this.goods = data.good;
					this.sku = this.skuList[0];
					// if (option.navigateFrom == 'cart' && Object.prototype.toString.call(option.navigateFrom) != '[object Undefined]') {
					if(!this.hasLogin){
						this.cart_amount = cartList.length;
					} else {
						this.cart_amount = data.total_count; //购物车商品数量
					}

					this.sku.price = parseFloat(this.sku.price).toFixed(2);
					this.sku.original_price = parseFloat(this.sku.original_price).toFixed(2);
					this.isKeep = 0;
					this.swiperList = this.sku.image.concat().split(',');
					this.specSelected = this.sku.spec_value_ids.split(',').map(Number);
					// this.specList = data.specs.forEach(specItem => {
					// 	if (specItem.spec_value) {
					// 		for (let item of specItem.spec_value) {
					// 			if (this.specSelected.indexOf(item.id.toString()) != -1) {
					// 				item.selected = 1
					// 				this.selectGoodsSku(this.sku.pic, this.specSelectedValue, this.sku.price);
					// 				this.specSelectedValue = this.specSelectedValue + item.name;

					// 			} else {
					// 				item.selected = 0
					// 			}
					// 		}
					// 	}
					// })
					
					data.specs.forEach(specItem => {
						specItem.spec_value.forEach(valItem =>{
							if(this.specSelected.includes(Number(valItem.id))){
								valItem.selected = true;
								this.selectGoodsSku(this.sku.pic, this.specSelectedValue, this.sku.price);
								this.specSelectedValue = this.specSelectedValue + valItem.name;
							}else{
								valItem.selected = false
							}
						})
					})
					
					this.specList = data.specs					
					this.specSelectedValue = `${this.specSelectedValue}, ${this.amount}件`;
					let detail_html = '';
	
					this.goods.detail_html.split(',').forEach(imgItem =>{
						detail_html = detail_html.concat(`<img width="100%" src="${Api.imgsrc}${imgItem}"/>`)
					})
					
					if (detail_html) this.descriptionStr = `<div style="text-align:center;font-size:0;">${detail_html}</div>`;
				}

			}
		},
		onReady() {
			this.calcAnchor(); //计算锚点高度，页面数据是ajax加载时，请把此行放在数据渲染完成事件中执行以保证高度计算正确
		},
		onPageScroll(e) {
			//锚点切换
			this.selectAnchor = e.scrollTop >= this.anchorlist[2].top ? 2 : e.scrollTop >= this.anchorlist[1].top ? 1 : 0;
			//导航栏渐变
			let tmpY = 375;
			e.scrollTop = e.scrollTop > tmpY ? 375 : e.scrollTop;
			this.afterHeaderOpacity = e.scrollTop * (1 / tmpY);
			this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity;
			//切换层级
			this.beforeHeaderzIndex = e.scrollTop > 0 ? 10 : 11;
			this.afterHeaderzIndex = e.scrollTop > 0 ? 11 : 10;
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			// uni.showToast({
			// 	title: '触发上拉加载'
			// });
		},
		mounted() {

		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			computeSkuData(){
				let spudSortParams = null;
				this.skuRankList = Object.freeze(this.skuList.map(item =>{
					//按照ID 从小到大排序
					
				}))
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			//消息列表
			toMsg() {
				uni.showToast({
					title: '暂未开通',
					icon: "none"
				});
				// uni.navigateTo({
				// 	url: '/pages/msg/msg'
				// })
			},

			/**
			 * @TODO
			 */
			// 客服
			toChat() {
				uni.showToast({
					title: '暂未开通',
					icon: "none"
				});

				// uni.navigateTo({
				// 	url: "../msg/chat/chat?name=客服008"
				// })
			},

			toCart() {
				// switchTab
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			// 分享
			share() {
				uni.showToast({
					title: '暂未开通',
					icon: "none"
				});

				// this.shareClass = 'show';
			},
			hideShare() {
				this.shareClass = 'hide';
				setTimeout(() => {
					this.shareClass = 'none';
				}, 150);
			},

			/**
			 * @description 收藏   TODO
			 */
			async keep() {
				if (this.hasLogin) {
					let params = {},
						method = 'POST',
						data = await Api.apiCall(method, Api.goods.favoriteSave, params);
					if (data) {
						this.isKeep = this.isKeep ? false : true;
					}
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}
			},

			/**
			 * @param {Object} sku
			 * @param {String} mode
			 * @description 规则弹窗选择购买还是购物车 sku为商品规格 mode为选择方式 => cart、buy
			 */
			selectMode(sku, mode) {
				switch (mode) {
					case 'cart':
						this.joinCart(sku);
						break;
					case 'buy':
						this.buy(sku);
						break;
					case 'fortune':
						this.fortuneExchange(sku);
						break;
					default:
						this.doubleMode = true
				}
			},

			/**
			 * @param {String} pics 图片URL
			 * @param {String} skuDesc 商品规格描述
			 * @param {String} original_price 当前所选规格价格
			 */
			selectGoodsSku(pics, skuDesc, price) {
				this.selectSku.pics = pics;
				this.selectSku.skuDesc = skuDesc;
				this.selectSku.price = price;
			},

			adjustDecs() {
				this.amount = 1;
				let list = this.specSelectedValue.split(',');
				list.splice(list.length - 1, 1, this.amount + '件')
				this.specSelectedValue = list.join(',');
				this.$forceUpdate();
			},

			// 加入购物车
			async joinCart(sku) {
				let id = sku.id; //对应商品的skuID

				//用户未登录时
				if (!this.hasLogin) {
					let cartItem = {
						sku_id: id,
						count: parseInt(this.amount)
					};
					let cartList = uni.getStorageSync('cartList');
					if (cartList) {
						// cartList.forEach(item => {
						// 	if (item.sku_id === id) {
						// 		console.log('**item**', JSON.stringify(item));
						// 		item.count += parseInt(this.amount);
						// 	}
						// })
						let index = cartList.findIndex(item => item.sku_id === id)
						if (index == -1) {
							cartList.push(cartItem);
						} else {
							cartList[index].count += parseInt(this.amount);
						}
					} else {
						cartList = [];
						cartList.push(cartItem);
					}
					uni.setStorageSync('cartList', cartList);
					this.cart_amount = cartList.length;
					uni.showToast({
						title: '添加购物车成功!',
						icon: "none"
					});
					this.$refs.cartPopup.close()
					return;
				} else {
					// 用户登录状态时，清空客户端购物车缓存
					uni.removeStorage({
						key: 'cartList'
					})
				}
				let data;
				if (sku && sku.id) {
					let params = {
						'sku_id': sku.id,
						'count': this.amount
					};
					data = await Api.apiCall('post', Api.order.Cart, params);
				}
				if (data) {
					this.cart_amount = data.total_count;
					this.amount = data.total_count;

					uni.showToast({
						title: '添加购物车成功!',
						icon: "none"
					});
					this.hideSpec();
				} else {
					uni.showToast({
						title: '添加购物车错误!',
						icon: "none"
					});
				}

				this.adjustDecs();
			},
			//立即购买
			async buy(sku) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					// console.log('**sku**', JSON.stringify(sku));
					this.hideSpec();
					uni.navigateTo({
						//type =1为立即购买
						// url: '/mall/product/list?cid='+e.id+'&name='+e.name,
						url: `/mall/order/createOrder?type=1&sku_id=${sku.id}&count=${this.amount}`
					})
				}
				this.adjustDecs();
			},

			//福分兑换 
			async fortuneExchange(sku) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					this.hideSpec();
					try{
						if(this.userFortune >= this.fortune){
							throw '福分不足，快去赚福分吧'
							return;
						}
						if(this.sku.limit_stock <= this.sku.ex_quantity){
							throw '当前商品已兑换完哦！'
							return;
						}
						if(this.sku.qty == 0){
							throw '当前商品已无库存！'
							return;
						}
						uni.navigateTo({
							url: `/mall/order/createOrder?type=1&sku_id=${sku.id}&count=${this.amount}&product_id=${this.product_id}&fortune=${this.fortune}`
						})
					}catch(e){
						this.$api.msg(e);
						//TODO handle the exception
					}
					// if (this.userFortune >= this.fortune ) {
					// 	uni.navigateTo({
					// 		url: `/mall/order/createOrder?type=1&sku_id=${sku.id}&count=${this.amount}&product_id=${this.product_id}&fortune=${this.fortune}`
					// 	})
					// } else {
					// 	this.$api.msg('福分不足，快去赚福分吧');
					// }
				}
			},
			//商品评论
			toRatings() {
				uni.navigateTo({
					url: '/mall/product/ratings'
				})
			},
			//跳转确认订单页面
			toConfirmation() {
				let tmpList = [];
				let goods = {
					id: this.goodsData.id,
					img: '../../static/img/goods/p1.jpg',
					name: this.goodsData.name,
					spec: '规格:' + this.goodsData.spec[this.selectSpec],
					price: this.goodsData.price,
					number: this.goodsData.number
				};
				tmpList.push(goods);
				uni.setStorage({
					key: 'buylist',
					data: tmpList,
					success: () => {
						uni.navigateTo({
							url: '../order/confirmation'
						})
					}
				})
			},
			//跳转评论列表
			showComments(goodsid) {

			},
			//选择规格
			// setSelectSpec(index) {
			// 	this.selectSpec = index;
			// },

			/**
			 * @param {Number} index 所有规格索引
			 * @param {Number} childIndex 当前规格索引
			 * @param {Object} childItem 当前规格对象
			 * @description 选择规格
			 */
			selectSpecMethod(index, childIndex, childItem) {
				let list = this.specList[index].spec_value;
				this.specSelectedValue = "";
				var indexCount = 0;
				list.forEach(item => {
					if (childItem.selected) {
						return false;
					}
					if (item.selected) {
						indexCount = this.specSelected.indexOf(item.id.toString());
					}
				})
				list.forEach(item => {
					if (item.id === childItem.id) {
						this.specSelected.splice(indexCount, 1, item.id.toString());
						this.$set(item, 'selected', 1);
					} else {
						this.$set(item, 'selected', 0);
					}
				})
				console.log(`list: ${JSON.stringify(list)}`);
				//选择商品SKU属性值更改商品对应的SKU;
				this.skuList.forEach(item => {
					var specSelected = item.spec_value_ids.split(',');
					if (specSelected.join(",") == this.specSelected.join(",")) {
						this.sku = item;
						var price = this.sku.price;
						var ori_price = this.sku.original_price;
						this.sku.price = parseFloat(price).toFixed(2);
						this.sku.original_price = parseFloat(ori_price).toFixed(2);
						this.swiperList = item.image.split(',');

					}
				})

				this.specList.forEach(item => {
					let spec_item_value = item.spec_value;
					for (let cItem of spec_item_value) {
						if (cItem.selected == 1) {
							this.specSelectedValue = this.specSelectedValue + cItem.name + ",";
						}
					}
				})
				console.log(`specSelectedValue: ${JSON.stringify(this.specSelectedValue)}`);
				this.selectGoodsSku(this.sku.pic, this.specSelectedValue, this.sku.price);
				this.specSelectedValue = this.specSelectedValue + this.amount + "件";

			},
			//减少数量
			sub() {
				if (this.amount <= 1) {
					return;
				}
				// this.cart_amount--;
				this.amount--;
				var list = this.specSelectedValue.split(',');
				list.splice(list.length - 1, 1, this.amount + '件')
				this.specSelectedValue = list.join(',');
			},
			//增加数量
			add() {
				// this.cart_amount++;
				this.amount++;
				var list = this.specSelectedValue.split(',');
				list.splice(list.length - 1, 1, this.amount + '件')
				this.specSelectedValue = list.join(',');

				console.log('添加购物车', JSON.stringify(this.specSelectedValue));
				this.$forceUpdate();
			},
			//跳转锚点
			toAnchor(index) {
				this.selectAnchor = index;
				uni.pageScrollTo({
					scrollTop: this.anchorlist[index].top,
					duration: 200
				});
			},
			//计算锚点高度
			calcAnchor() {
				this.anchorlist = [{
						name: '商品',
						top: 0
					},
					{
						name: '评价',
						top: 0
					},
					{
						name: '详情',
						top: 0
					}
				]
				let commentsView = uni.createSelectorQuery().select("#comments");
				commentsView.boundingClientRect((data) => {
					let statusbarHeight = 0;
					//APP内还要计算状态栏高度
					// #ifdef APP-PLUS
					statusbarHeight = plus.navigator.getStatusbarHeight()
					// #endif
					let headerHeight = uni.upx2px(100);
					this.anchorlist[1].top = data.top - headerHeight - statusbarHeight;
					this.anchorlist[2].top = data.bottom - headerHeight - statusbarHeight;

				}).exec();
			},
			//返回上一页
			back() {
				uni.navigateBack();
			},
			//服务弹窗
			showService() {
				this.$refs.service.open();
			},
			//关闭服务弹窗
			hideService() {
				this.$refs.service.close();
			},
			//规格弹窗
			showSpec(fun, mode) {
				this.specMode = mode; //选择规格弹窗的方式为 ‘buy’为购买 ‘cart’为购物车 'double'为双选模式
				this.$refs.cartPopup.open()
			},
			//关闭规格弹窗
			hideSpec() {
				this.$refs.cartPopup.close()
			},
			discard() {
				var list = this.specSelectedValue.split(',');
				list.splice(list.length - 1, 1, this.amount + '件')
				this.specSelectedValue = list.join(',');
			},
			playVideo(path) {
				this.videoSrc = path;
				// this.isPlayVideo = true;
				this.$nextTick(function() {
					this.videoContext.requestFullScreen({
						direction: 0
					});
				});

			},
			stopPlayVideo() {
				this.videoContext.pause();
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		width: 100vw;
	}

	.container {}

	.container-box {
		width: 100vw;
		height: 100%;
		// perspective: 1upx;
		// perspective-origin: 0 0;
		// -webkit-perspective: 1upx;
		// -webkit-perspective-origin: 0 0;
		-webkit-overflow-scrolling: touch;
	}

	.yticon {
		font-size: 28upx;
		color: #232323;
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
		background-color: #f1f1f1;
		transition: opacity 0.05s linear;
	}

	.header {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.before,
		.after {
			width: 100%;
			padding: 0 30upx;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			top: 0;
			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */
			transition: opacity 0.05s linear;

			.back {
				width: 125upx;
				height: 60upx;
				flex-shrink: 0;

				.yticon {
					width: 60upx;
					height: 60upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 54upx;
					color: #000000;
				}
			}

			.middle {
				width: 100%;

			}

			.icon-btn {
				width: 125upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;

				.yticon {
					&:first-child {
						margin-right: 5upx;
					}

					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 42upx;
				}
			}
		}

		.before {
			.back {
				.yticon {
					color: #fff;
					background-color: rgba(0, 0, 0, .5);
					border-radius: 50%;
				}
			}

			.icon-btn {
				.yticon {
					color: #fff;
					background-color: rgba(0, 0, 0, .5);
					border-radius: 50%;

				}
			}
		}

		.after {
			background-color: #f1f1f1;

			.back {
				.yticon {
					color: #666;
				}
			}

			.icon-btn {
				.yticon {
					color: #666;
				}
			}

			.middle {
				font-size: 32upx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 31upx;
				box-sizing: border-box;

				.middle_item {
					flex: 1;
					height: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					color: #757677;

					&.on {
						color: #232323;
						font-weight: bold;
						transition: all 300ms ease-in-out;

						&::before {
							content: '';
							position: absolute;
							bottom: 0;
							width: 50%;
							height: 8upx;
							background-color: #FFBC21;
						}
					}
				}
			}
		}
	}

	.swiper-box {
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		z-index: 1;
		width: 100vw;
		height: 100vw;

		// transform-origin: 0 0;
		// transform: translate3d(0, 0, -2upx) scale(3);
		// -webkit-transform-origin: 0 0;
		// -webkit-transform: translate3d(0, 0, -2upx) scale3d(3);
		swiper {
			width: 100vw;
			height: 100vw;

			swiper-item {
				image {
					width: 100vw;
					height: 100vw;
				}
			}
		}

		.indicator {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 25upx;
			height: 40upx;
			border-radius: 40upx;
			font-size: 22upx;
			position: absolute;
			bottom: 20upx;
			right: 20upx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.product-info {
		position: relative;
		z-index: 2;
		background-color: #f8f8f8;
	}

	.card-box {
		width: 100%;
		padding: 20upx 30upx;
		box-sizing: border-box;
		background-color: #fff;
		margin-bottom: 20upx;
		border-radius: 20upx;
		overflow: hidden;
	}

	.goods-info {
		width: 100%;
		border-radius: 0 0 20upx 20upx;
		margin-bottom: 20upx;
		overflow: hidden;

		.price-number {
			align-items: center;
			height: 128upx;
			display: flex;
			background-color: #FFBC21;
			font-size: 24upx;
			color: #232323;

			.name {
				width: 142upx;
				height: 100%;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				// background-color: #232323;
				position: relative;
				overflow: hidden;

				text {
					z-index: 2;
				}

				&::before {
					content: '';
					z-index: 1;
					position: absolute;
					width: 400upx;
					height: 400upx;
					border-radius: 50%;
					background-color: #232323;
					right: 0;
				}
			}

			.price-box {
				width: 220upx;
				margin-left: 20upx;
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: flex-end;

				.price {
					text {
						&:last-child {
							font-size: 56upx;
						}
					}
				}

				.original-price {
					margin-left: 30upx;
					text-decoration: line-through;
				}
			}

			.sold {
				width: 350upx;
				margin-right: 25upx;
				display: flex;
				justify-content: flex-end;
				// margin-right:20upx;
			}
		}

		.info {
			width: 100vw;
			// height: 128upx;
			padding: 20upx 30upx;
			box-sizing: border-box;
			justify-content: space-between;
			display: flex;
			font-size: 24upx;
			color: #ABADAD;
			background-color: #FFF;

			.title {
				margin: 15upx 0;

				.name {
					font-size: 36upx;
					margin-bottom: 10upx;
					color: #232323;
				}
			}

			.box {
				margin-top: 30upx;
				color: #232323;

				.icon {
					display: flex;
					justify-content: center;
					width: 40upx;
					height: 40upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 20upx;
					// color: #ABADAD;
				}
			}

		}
	}

	.spec {
		.row {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 0 0 30upx 0;

			.text {
				font-size: 28upx;
				color: #232323;
				margin-right: 20upx;
			}

			.delivery {
				font-size: 28upx;
				color: #232323;
				margin-left: 80upx;
			}

			.content {
				font-size: 28upx;
				display: flex;
				flex-wrap: wrap;

				.serviceitem {
					margin-right: 10upx;
				}

				.sp {
					width: 100%;
					display: flex;

					view {
						background-color: #f6f6f6;
						padding: 5upx 10upx;
						color: #999;
						margin-right: 10upx;
						font-size: 20upx;
						border-radius: 5upx;

						&.on {
							border: solid 1upx #f47952;
							padding: 4upx 8upx;
						}
					}
				}
			}

			.arrow {
				position: absolute;
				right: 4%;

				.text {
					font-size: 28upx;
					color: #232323;
					margin-right: 0upx;
				}

				.yticon {
					color: #ccc;
				}

				.btn {
					width: 120upx;
					height: 48upx;
					font-size: 24upx;
					display: flex;
					border: 2upx solid #E3E7E3;
					align-items: center;
					justify-content: center;
					border-radius: 10upx;
				}
			}
		}
	}

	.comments {
		.row {
			width: 100%;
			height: 40upx;
			display: flex;
			margin: 0 0 30upx 0;
			justify-content: space-between;

			.text {
				font-size: 28upx;
			}

			.arrow {
				font-size: 28upx;
				color: #232323;
			}

			.title {
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: $font-base + 4upx;
				color: #999;
			}
		}

		.row2 {
			width: 100%;
			height: 88upx;
			display: flex;
			justify-content: center;

			.btn {
				width: 208upx;
				height: 58upx;
				display: flex;
				margin: 12upx 18upx 0;
				border-radius: 29upx;
				border: 2upx solid #E3E7E3;
				justify-content: center;
				align-items: center;
				font-size: 26upx;
				color: #313333;
			}
		}

		.comment {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.user-info {
				width: 100%;
				height: 80upx;
				display: flex;
				align-items: center;

				.face {
					width: 66upx;
					height: 66upx;
					margin-right: 8upx;
					flex-shrink: 0;

					image {
						width: 66upx;
						height: 66upx;
						border-radius: 100%;
					}
				}

				.arrow {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-left: 20upx;

					.name-rating {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: baseline;

						.username {
							font-size: 24upx;
							color: #313333;
						}

						.rating {
							font-size: 24upx;
							color: #232323;
						}
					}

					.Star {
						width: 100%;
						color: #aaa;
						font-size: 26upx;

						.f01 {
							width: 20upx;
							height: 19upx;
							margin-right: 2upx;
						}
					}

				}

				.username {
					font-size: 24upx;
					color: #999;
				}
			}

			.content_content {
				width: 100%;
				margin-top: 10upx;
				font-size: 26upx;
			}

			.img-video {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.box {
					width: 208upx;
					height: 208upx;
					margin: 29upx 0 20upx;
					position: relative;
					align-items: center;

					image {
						position: absolute;
						width: 100%;
						height: 100%;
						border-radius: 10upx;
					}

					.playbtn {
						position: absolute;

						.icon {
							font-size: 80upx;
							color: rgba(255, 255, 255, .9)
						}
					}
				}
			}
		}
	}

	.description {
		padding-bottom: 90upx;

		.title {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: $font-base + 4upx;
			color: #232323;
		}

	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		// padding: 0 30upx;
		height: 99upx;
		// border-top:1upx solid #eee;
		box-shadow: 0 -7upx 10upx rgba(116, 116, 116, 0.3);
		background-color: #fff;
		z-index: 3;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icons {
			display: flex;
			height: 80upx;
			// margin-left: -4%;

			.box {
				// width: 80upx;
				// height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 10upx;
				flex-wrap: wrap;
				color: #232323;

				.yticon {
					font-size: 45upx;
					// color: #828282;
				}

				.text {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 22upx;
					color: #666;
				}

				.cart_amount {
					position: absolute;
					height: 30upx;
					width: auto;
					min-width: 30upx;
					top: 14upx;
					margin-left: 30upx;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					border: 1upx solid #da1026;
					// zoom: 1;
					// display: inline;
					padding: 2upx;
					font-size: 24upx;
					line-height: 24upx;
					// letter-spacing: -2upx;
					color: #da1026;
					background-color: #FFF;
					border-radius: 15upx;
					// font-family: tahoma, arial;
					text-align: center;
				}
			}
		}

		.btn {
			flex: 1;
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-end;
			padding: 0 20upx;
			box-sizing: border-box;
			color: #fff;
			font-size: 28upx;

			.joinCart,
			.buy {
				height: 80upx;
				width: 220upx;
				display: flex;
				border-radius: 40upx;
				justify-content: center;
				align-items: center;
			}

			.fortuneExchange {
				width: 100%;
				margin: 0 20upx;
				height: 80upx;
				border-radius: 40upx;
				background-image: linear-gradient(to right, #FFBC21,#ffd34c);
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.joinCart {
				background-color: #232323;
				background-image: linear-gradient(to right,  #232323,#616161);
			}

			.buy {
				margin-left: 20upx;
				background-image: linear-gradient(to right, #FFBC21,#ffd34c);
			}
		}
	}


	.popup-box {
		padding: 0 30upx;
		min-height: 0;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;

		.cart-content {
			width: 100%;
			padding: 20upx 0;

			.content_goods {
				display: flex;
				flex-flow: row nowrap;
				height: 210upx;
				align-items: flex-end;
				margin: 25upx 0 0;

				.goods_img {
					background-color: #EFF2F4;
					width: 210upx;
					height: 210upx;
					border-radius: 10upx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.goods_text {
					box-sizing: border-box;
					padding: 0 23upx;

					.price {
						text {
							color: #E52632;
							font-size: 56upx;

							&:first-child {
								font-size: 36upx;
							}
						}
					}

					.desc {
						color: #ABADAD;
						font-size: 24upx;
					}
				}
			}

			.row {
				width: 100%;
				display: flex;
				align-items: center;
				flex-flow: row wrap;
				margin: 40upx 0;

				.text {
					font-size: 28upx;
					color: #232323;
					width: 100%;
					margin-bottom: 46upx;
				}

				.content_spc {
					font-size: 28upx;
					font-weight: 400;
					display: flex;
					margin-right: 10upx;
					flex-wrap: wrap;
					height: 68upx;
					padding: 0 20upx;
					align-items: center;
					box-sizing: border-box;
					border: 2upx solid #EFF2F4;
					background-color: #EFF2F4;
					border-radius: 34upx;
				}

				.selected {
					border: 2upx solid #FFBC21;
					background-color: rgba(249, 226, 162, .6);
					color: #FFBC21;
				}
			}

			.length {
				margin-top: 30upx;
				// border-top: solid 1upx #aaa;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20upx;

				.text {
					font-size: 30upx;
				}

				.number {
					display: flex;
					justify-content: center;
					align-items: center;

					.input {
						width: 80upx;
						height: 60upx;
						margin: 0 10upx;
						background-color: #f3f3f3;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 80upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							font-size: 26upx;
						}
					}

					.sub,
					.add {
						width: 60upx;
						height: 60upx;
						background-color: #f3f3f3;
						border-radius: 5upx;

						.yticon {
							font-size: 30upx;
							width: 60upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;

						}
					}
				}
			}
		}

		.service-content {
			.row {
				margin: 30upx 0;

				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}

				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}

		.share-content {
			.btn {
				width: 100%;
				height: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				border-top: solid 1upx #666666;
			}

			.h1 {
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34upx;
			}

			.list {
				width: 100%;
				display: flex;
				padding: 10upx 0 30upx 0;

				.box {
					width: 25%;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;

					image {
						width: 13.8vw;
						height: 13.8vw;
					}

					.title {
						margin-top: 10upx;
						display: flex;
						justify-content: center;
						width: 100%;
						font-size: 26upx;
					}
				}
			}
		}

		// .spec {
		// 	.title {
		// 		font-size: 30upx;
		// 		margin: 30upx 0;
		// 	}

		// 	.sp {
		// 		display: flex;

		// 		view {
		// 			font-size: 28upx;
		// 			padding: 5upx 20upx;
		// 			border-radius: 8upx;
		// 			margin: 0 30upx 20upx 0;
		// 			background-color: #f6f6f6;

		// 			&.on {
		// 				padding: 3upx 18upx;
		// 				border: solid 1upx #f47925;
		// 			}
		// 		}
		// 	}
		// }
		.btn {
			flex: 100%;
			height: 100upx;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			align-items: center;
			box-sizing: border-box;
			margin-bottom: 20upx;

			.button {
				flex: 1;
				height: 80upx;
				border-radius: 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				// font-size: 28upx;
				font-size: $font-lg;
				background-color: #FFBC21;
				box-shadow: 1px 2px 5px rgba(255, 188, 33, 0.4);
				margin: 0 20upx;
			}

			.button_cart {
				background-color: #434343;
				box-shadow: none;
			}
		}
	}
</style>
